<!-- 数据同步 -->
<template>
    <a-layout class="table-content">
      <div class="search-box">
        <div class="btn-box">
            <a-button type="primary">
                数据同步
            </a-button>
        </div>
        <div class="input-box">
          <a-input v-model.trim="queryParam.concreteProblems" placeholder="文件名称" />
          <a-button type="primary" @click="search" class="mr8">
            搜索
          </a-button>
          <a-button @click="loadtable">
            重置
          </a-button>
        </div>
      </div>
      <a-table
        class="table-box"
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        @change="tablePaginationChange"
        rowKey="id"
        :scroll="{x: '100%', y: 'calc( 103vh - 350px )'}"
      >
        <span
          slot="action"
          slot-scope="record"
          class="actionbtn">
          <span @click="see(record)">导入</span>
        </span>
      </a-table>
    </a-layout>
  </template>

  <script>
  import {
    getDataSynchronization
  } from '@/utils/JsonTools'

  export default {
    name: 'Feedback',
    data () {
      return {
        // 列
        columns: [
          {
            title: '序号',
            width: 70,
            align: 'center',
            customRender: (text, record, index) => `${index + 1}`
          },
          {
            title: '文件',
            dataIndex: 'ProblemClassification',
            key: 'ProblemClassification',
            align: 'center',
            ellipsis: true
          },
          {
            title: '文件上传时间',
            dataIndex: 'Problems',
            key: 'Problems',
            align: 'center',
            ellipsis: true
          },
          {
            title: '文件获取时间',
            dataIndex: 'concreteProblems',
            key: 'concreteProblems',
            align: 'center',
            ellipsis: true
          },
          {
            title: '导入时间',
            dataIndex: 'concreteProblems1',
            key: 'concreteProblems1',
            align: 'center',
            ellipsis: true
          },
          {
            title: '操作',
            key: 'operation',
            width: 100,
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        dataSource: [],
        queryParam: {
          concreteProblems: undefined
        },
        // 分页参数
        pagination: {
          current: 1,
          // defaultCurrent: 1,
          total: 0, // 总数
          showSizeChanger: true,
          // 是否可以快速跳转至某页
          showQuickJumper: true,
          pageSizeOptions: ['10', '20', '40', '80', '100'],
          // showTotal: total => '共 ${total} 条', // 分页中显示总的数据
          // hideOnSinglePage: true, // 只有一页时是否隐藏分页器
          pageSize: 10 // 每页条数，所有页设置统一的条数
        },
      }
    },
    mounted () {
      this.loadtable()
    },
    methods: {
      tablePaginationChange (pagination) {
        // 重新设置当前页
        this.pagination.current = pagination.current
        this.pagination.pageSize = pagination.pageSize
      },
      // 查询反馈意见
      loadtable () {
        this.queryParam.concreteProblems = undefined
        getDataSynchronization().then(res => {
          this.dataSource = [...res]
        })
      },
      // 搜索反馈意见
      search () {
        getDataSynchronization().then(res => {
          let arr = []
          // eslint-disable-next-line no-unused-vars
          let a, b, c
          if (this.queryParam.concreteProblems === undefined) {
            b = ''
          } else {
            b = this.queryParam.concreteProblems
          }
          res.forEach(element => {
            if (element.concreteProblems.indexOf(b) > -1) {
              arr.push(element)
            }
          })
          this.dataSource = [...arr]
        })
      },
      see(record) {

      }
    }
  }
  </script>
  <style lang="scss" scoped>
  </style>
